<template>
  <img class="bgimg" :src="musicList.al.picUrl">
  <div class="musicDetailTop">
    <div class="detailLeft">
      <svg class="icon" aria-hidden="true" @click="backHome">
        <use xlink:href="#icon-zuojiantou"></use>
      </svg>
      <div class="gedan">
      <Vue3Marquee>
        {{ musicList.name }}
      </Vue3Marquee>  
      <div class="author">
        <span v-for="(item,i) in musicList.ar" :key="i"> {{ item.name }} </span>
        <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-youjiantou"></use>
      </svg>
      </div>
      </div>
    </div>
    <div class="detailRight">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-fenxiang"></use>
      </svg>
    </div>
  </div>
  <div class="musicContent" v-show="!isLyricShow">
  <img src="@/assets/needle-ab.png" class="img_needle_ab" :class="{img_needle_ab_active:!isBtnShow}">
  <img src="@/assets/cd.png" class="img_cd">
  <img :src="musicList.al.picUrl" @click="isLyricShow=true" class="img_ar" :class="{img_ar_play_active:!isBtnShow,img_ar_play_pause:isBtnShow}">
  </div>
  <div class="musicLyric" ref="musicLyric" v-show="isLyricShow">
  <p v-for="(ly, i) in Lyric" :key="i" :class="{active:(currentTime >= ly.time && ly.pre > currentTime)}">
  {{ ly.lrc }}
  </p></div>
  <div class="musicFooter">
  <div class="footerTop">
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-aixin"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xiazai1"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-heijiaochangpian-copy"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xiaoxi"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-liebiao-"></use>
      </svg>
  </div>
  <div class="footerContent">
  <input type="range" min="0" :max="duration" step="0.05" v-model="currentTime">  
  </div>
  <div class="footer">
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xunhuan"></use>
      </svg>
      <svg class="icon" aria-hidden="true" @click="goPlay(-1)">
        <use xlink:href="#icon-shangyishoushangyige"></use>
      </svg>
      <svg class="icon" aria-hidden="true" style="width:.9rem; height:.9rem;" @click="play" v-if="isBtnShow">
        <use xlink:href="#icon-bofang3" ></use>
      </svg>
      <svg class="icon" aria-hidden="true" style="width:.9rem; height:.9rem;" @click="play" v-else>
        <use xlink:href="#icon-bofang2" ></use>
      </svg>
      <svg class="icon" aria-hidden="true" @click="goPlay(1)">
        <use xlink:href="#icon-xiayigexiayishou"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-playlistHeart2"></use>
      </svg></div>
  </div>
</template>

<script>
import { Vue3Marquee } from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'
import {ref,onMounted,onUpdated} from 'vue'
import { mapMutations, mapState } from 'vuex'
export default {
  setup (props) {
    let isLyricShow = ref(false)
    onMounted(()=>{
      props.addDuration()
    }),
    onUpdated(()=>{
      props.addDuration()
    })
    return { isLyricShow }
  },
  props:['musicList','play','addDuration'],
  components: {
    Vue3Marquee,
  }, 
  watch:{
    currentTime(newVal){
      const p = document.querySelector('p.active')
      if (p){
        if( p.offsetTop>=300 ){
          this.$refs.musicLyric.scrollTop = p.offsetTop - 300
          }
      }
      if( newVal === this.duration){
        if (this.playListIndex === this.playList.length-1) {
          this.updatePlayListIndex(0)
        } else {
          this.updatePlayListIndex(this.playListIndex+1)
        }
      }
    }
  },
  computed:{
    ...mapState([
      'isBtnShow',
      'LyricList',
      'currentTime',
      'playListIndex',
      'playList',
      'duration']),
    Lyric(){
      let arr     
      if(this.LyricList) {
        arr = this.LyricList.split(/[(\r\n)\r\n]+/).map(item=>{
          let min = item.slice(1,3)
          let sec = item.slice(4,6)
          let mill = item.slice(7,10)
          let lrc = item.slice(11,item.length)
          let time = parseInt(min)*60*1000 + parseInt(sec)*1000 +parseInt(mill)
          if(isNaN(Number(mill))) {
             mill = item.slice(7,9)
             lrc = item.slice(10,item.length)
             time = parseInt(min)*60*1000 + parseInt(sec)*1000 +parseInt(mill)
          }
          return { min,sec,mill,lrc,time }
        })
        arr.forEach((item,i) => {
          if( i===arr.length-1 || isNaN(arr[i+1].time) ){
            item.pre = 1000000
          }else{
            item.pre = arr[i+1].time
          }
        })
        return arr
      }
    }
  },
  methods:{
    ...mapMutations(['updateDetailShow','updatePlayListIndex','updateDuration']),
    backHome(){
      this.updateDetailShow()
      this.isLyricShow = false
    },
    goPlay(i){
     let index = this.playListIndex + i
      if(index < 0){
        index = this.playList.length - 1
      }else if(index >= this.playList.length){
        index = 0
      }
      this.updatePlayListIndex(index)
    }
  }
}
</script>

<style lang="scss" scoped>
.bgimg{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -999;
  filter: blur(50px);
}
.musicDetailTop{
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 1rem;
  padding: .3rem;
  .detailLeft{
    display: flex;
    .icon{
      fill: #fff;
    }
    .gedan{
      margin-left: .2rem;
      color: #fff;
     .author{
        display: flex;
        align-items: center;
      span{
        font-size: .24rem;
        color: #999;
      }
      .icon{
        fill:#999;
        width: .24rem;
      }
    }
  }
}
}
.musicContent{
  width: 100%;
  height: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .img_needle_ab{
    width: 2rem;
    height: 3rem;
    position: absolute;
    left: 46%;
    transform-origin: 0 0;
    transform: rotate(-15deg);
    transition: all 2s;
  }
  .img_needle_ab_active{
    transform: rotate(0deg);
  }
  .img_cd{
    width: 5rem;
    height: 5rem;
    position: absolute;
    bottom: 2.3rem;
    z-index:-1;
  }
  .img_ar{
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    position: absolute;
    bottom: 3.14rem;
    animation: rotateCD 10s linear infinite;
  }
  .img_ar_play_active{
    animation-play-state: running;
  }
  .img_ar_play_pause{    
    animation-play-state: paused;
  }
  @keyframes rotateCD {
   to{
    transform: rotateZ(0deg);
   }
   from{
    transform: rotateZ(360deg);
   }

  }
}
.musicLyric{
  margin-top: .2rem;
  width: 100%;
  height: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: scroll;
  p{
    color: #c7adad;
    margin-bottom: .4rem;
  }
  .active{ 
    font-size: .4rem;
    color: #fff;
    transition: all .2s;
  }
}
.musicFooter{
  .footerTop{
    margin-top: .3rem;
  }
  .footerContent{
    padding: 0 .2rem;
    input{
      width: 100%;
      height: .1rem;
      background-color: aqua;
    }
  }
  .footerTop,.footer{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: .6rem;
    .icon{
      fill: #fff;
      width: .6rem;
      height: .6rem;
    }
  }
  .footer{
    position: absolute;
    bottom: .3rem;
    height: 0.9rem; 
  }
}
</style>